<template>
  <div>
    <div class="StoreList">
      <div class="ListItem" v-for="item in StoreData">
        <img :src="item.img? item.img : require('@/assets/images/StoreListImg.jpg')" >
        <div class="re" @click="detailFunc(item.id)"></div>
        <div class="TitleAddress" @click="detailFunc(item.id)">
          <div class="Title">{{ item.name }}</div>
          <div class="Address">{{ item.address }}</div>
        </div>
        <!--<div class="Like" @click="LikeFunc(item)">-->
          <!--<img :src="item.liked ? likedImg : likeImg">-->
        <!--</div>-->
      </div>
    </div>


  </div>
</template>

<style lang="less" scoped>
  .StoreList {
    padding-top: 3.5px;
    width: 100%;
    .ListItem {
      position: relative;
      padding:3.5px 7px;
      .re {
        position: absolute;
        z-index: 1;
        right: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        /*background: rgba(0, 0, 0, .2);*/
        background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(28, 28, 28, 0)), color-stop(100%, rgba(28,28,28,.8)));;
      }
      img {
        display: block;
        border-radius: 4px;
        width: 100%;
        height: 100%;
      }

      .TitleAddress {
        position: absolute;
        z-index: 2;
        left: 4.3%;
        bottom: 0;
        .Title {
          z-index: 9999999;
          font-size: 0.15rem;
          color: #fff;
          text-align: left;
          font-weight: 900;
        }
        .Address {
          font-size: 0.1rem;
          color: #ebebeb;
          line-height: 0.13rem;
          text-align: left;
          font-weight: 100;
          margin-top:0.07rem;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          margin-right: 0.1rem;
          margin-bottom: 0.135rem;
        }
      }

      .Like {
        position: absolute;
        z-index: 3;
        right: 0.07rem;
        bottom: 0.1rem;
        width: 0.8rem;
        height: 0.5rem;
        img {
          margin-top: 13px;
          float: right;
          margin-right: 15px;
          height: 0.17rem;
          width: 0.18rem;
        }
      }
    }
  }



</style>

<script>

  import { Toast } from 'mint-ui'
  import { requestStoreList } from '@/api/api'

  export default {
    data () {
      return {
        LIKE_MSG_OPEN: true,
        likedImg: require('@/assets/images/liked_button.png'),
        likeImg: require('@/assets/images/like_button.png'),
        StoreData: [
          {
            id: 1,
            img: require('@/assets/images/StoreListImg.jpg'),
            name: '1',
            address: '深圳市天安数码城（龙岗）中央水池区面点王对面',
            liked: false
          }
        ]
      }
    },
    methods: {
      ItemHeight () {
        const item = document.getElementsByClassName('ListItem')
        let itemWdith = item[0].offsetWidth
        const itemHeight = itemWdith * (167 / 400)
        for (let i = 0; i < item.length; i += 1) {
          item[i].style.height = `${itemHeight}px`
        }
      },
      detailFunc (id) {
        sessionStorage.setItem('store_id', JSON.stringify(id))
        this.$router.push({ name: 'StoreDetail' })
      },
      LikeFunc (item) {
        let ItemIndex = this.StoreData.indexOf(item)
        if (item.liked) {
          item.liked = false
          this.ToastMsg(`已取消顶置${item.name}。`)
          return
        }
        this.StoreData.splice(0, 0, item)
        this.StoreData.splice(ItemIndex + 1, 1)
        item.liked = true
        this.ToastMsg(`已为您顶置${item.name}哟！`)
      },
      ToastMsg (string) {
        Toast({
          message: string,
          position: 'top',
          duration: 2000,
          className: 'ToastCss'
        })
      },
      GetStoreList () {
        requestStoreList().then((responds) => {
          this.StoreData = responds.data.data
        })
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.ItemHeight()
        this.GetStoreList()
      })
    }
  }
</script>
